<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>                  
	<meta http-equiv=Content-Type content="text/html;charset=utf-8">
	<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
	<meta content=always name=referrer>
	<title>OpenLayers 3地图示例</title>
	<link href="../ol3.13.1/ol.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="../ol3.13.1/ol.js" charset="utf-8"></script>
</head>

<body>
	<div id="map" style="width: 100%, height: 400px"></div>
	<script>

		// 在原点处创建一个feature
		var feature1 = new ol.Feature({
			geometry: new ol.geom.Point([0, 0])
		});

		// 并设置为半径为100像素的圆，用红色填充
		feature1.setStyle(new ol.style.Style({
			image: new ol.style.Circle({
				radius: 100,
				fill: new ol.style.Fill({
					color: 'red'
				})
			})
		}));

		// 在坐标[5000000, 5000000]处创建另一个feature
		var feature2 = new ol.Feature({
			geometry: new ol.geom.Point([5000000, 5000000])
		});

		// 并设置为半径为100像素的圆，用黄色填充
		feature2.setStyle(new ol.style.Style({
			image: new ol.style.Circle({
				radius: 100,
				fill: new ol.style.Fill({
					color: 'yellow'
				})
			})
		}));

	  // 创建地图
	  var map = new ol.Map({
			// 设置地图图层
			layers: [
			  // 创建一个使用Open Street Map地图源的瓦片图层
			  new ol.layer.Tile({source: new ol.source.OSM()}),
			  // 把之前创建的feature1和feature2放在另一个层里
			  new ol.layer.Vector({source: new ol.source.Vector({
			  	features: [feature1, feature2]
			  })})
			],
			// 设置显示地图的视图
			view: new ol.View({
			  center: [0, 0],	// 定义地图显示中心于经度0度，纬度0度处
			  zoom: 2			// 并且定义地图显示层级为2
			}),
			// 让id为map的div作为地图的容器
			target: 'map'	
		});

	  // 为地图注册鼠标移动事件的监听 
	  map.on('pointermove', function(event){
	  	map.forEachFeatureAtPixel(event.pixel, function(feature){
	  		// 为移动到的feature发送自定义的mousemove消息
	  		feature.dispatchEvent({type: 'mousemove', event: event});
	  	});
	  });

	  // 为feature1注册自定义事件mousemove的监听
	  feature1.on('mousemove', function(event){
	  	// 修改feature的样式为半径100像素的园，用蓝色填充
	  	this.setStyle(new ol.style.Style({
				image: new ol.style.Circle({
					radius: 100,
					fill: new ol.style.Fill({
						color: 'blue'
					})
				})
			}));
	  });
	</script>
</body>
	
</html>